<template>
  <div>
    <!-- 顶部导航栏 -->
    <van-nav-bar title="个人信息" left-arrow @click-left="onClickLeft">
    </van-nav-bar>
    <!-- 资料信息单元格 -->
    <van-cell-group inset>
      <!-- 头像上传 -->
      <van-cell title="头像" center is-link>
        <template #default>
          <van-image
            round
            class="avatar"
            :src="img || avatar"
            @click="imageClickFn"
          ></van-image>
          <input
            type="file"
            ref="iptFile"
            v-show="false"
            accept="image/*"
            name="head_img"
            @change="onFileChange"
          />
        </template>
      </van-cell>
      <van-cell
        title="用户名"
        :value="name || username"
        size="large"
        is-link
        @click="name_show = true"
      />
      <van-cell
        title="手机号"
        :value="tel || phone"
        size="large"
        is-link
        @click="phone_show = true"
      />
      <van-cell
        title="用户密码"
        value="*******"
        size="large"
        is-link
        @click="pwd_show = true"
      />
      <van-cell title="用户等级" :value="vip" size="large" />
      <br /><br /><br />
    </van-cell-group>
    <van-button class="btnLogout" @click="logout">退出登陆</van-button>

    <!-- 用户名弹窗 -->
    <van-dialog
      v-model="name_show"
      title="修改用户名"
      show-cancel-button
      :before-close="beforeCloseName"
    >
      <input type="text" v-model="name_value" ref="input" />
    </van-dialog>

    <!-- 手机号弹窗 -->
    <van-dialog
      v-model="phone_show"
      title="修改手机号"
      show-cancel-button
      :before-close="beforeClosePhone"
    >
      <input type="text" v-model="phone_value" ref="input" />
    </van-dialog>

    <!-- 密码弹窗 -->
    <van-dialog
      v-model="pwd_show"
      title="修改密码"
      show-cancel-button
      :before-close="beforeClosePwd"
    >
      <input type="text" v-model="pwd_value" ref="input" />
    </van-dialog>
  </div>
</template>
<script>
import { Toast } from "vant";
import { mapState } from "vuex";
export default {
  data() {
    return {
      img: "",
      name: "",
      tel: "",
      pwd: "",
      uid: sessionStorage.getItem("uid"),
      name_show: false,
      name_value: "",
      phone_show: false,
      phone_value: "",
      pwd_show: false,
      pwd_value: "",
      fileList: [],
    };
  },
  computed: {
    ...mapState({ userInfo: (state) => state.user.userInfo }),
    avatar() {
      return this.userInfo.user_img;
    },
    username() {
      return this.userInfo.user_name;
    },
    phone() {
      return this.userInfo.phone;
    },
    vip() {
      return this.userInfo.is_vip == 0 ? "普通用户" : "vip用户";
    },
  },
  mounted() {
    this.getData();
  },
  activated() {
    this.getData();
  },
  methods: {
    getData() {
      this.$store.dispatch("getUserInfo", sessionStorage.getItem("uid"));
    },
    // 头像上传
    onFileChange(e) {
      const formdata = new FormData();
      formdata.append("head_img", e.target.files[0]);
      this.axios.post("/avatar/upload", formdata).then((res) => {
        if (res.data.code == 200) {
          this.img = res.data.data;
          this.updateImg();
        }
      });
    },
    updateImg() {
      let uid = sessionStorage.getItem("uid");
      let user_img = this.img;
      let params = { uid, user_img };
      this.axios.post("/avatar/update_uimg", params).then((res) => {
        Toast.success("上传成功");
      });
    },
    imageClickFn() {
      this.$refs.iptFile.click();
    },

    // 修改用户名
    // 确认框关闭
    beforeCloseName(action, done) {
      if (action === "confirm") {
        let exp = /^[A-Za-z0-9_\-\u4e00-\u9fa5]{4,12}$/;
        if (exp.test(this.name_value)) {
          done();
          this.changeName(this.name_value);
          this.name_value = "";
        } else {
          Toast({
            message: "用户名为4-12位字符，修改失败",
            position: "bottom",
          });
          done();
        }
      } else {
        done();
        this.name_value = "";
      }
    },
    changeName(data) {
      let params = `username=${data}&uid=${this.uid}`;
      this.axios.post("/users/user_upname", params).then((res) => {
        console.log(res);
        if (res.data.code == 200) {
          Toast({
            message: "修改成功",
            position: "bottom",
          });
          this.name = data;
        } else {
          Toast({
            message: "修改失败",
            position: "bottom",
          });
        }
      });
    },

    // 修改手机号
    // 确认框关闭
    beforeClosePhone(action, done) {
      if (action === "confirm") {
        let exp = /^1[34578]\d{9}$/;
        if (exp.test(this.phone_value)) {
          this.changePhone(this.phone_value);
          done();
          this.phone_value = "";
        } else {
          Toast({
            message: "手机号格式不对",
            position: "bottom",
          });
          done();
        }
      } else {
        done();
        this.phone_value = "";
      }
    },
    changePhone(data) {
      let params = `phone=${data}&uid=${this.uid}`;
      this.axios.post("/users/user_upphone", params).then((res) => {
        console.log(res);
        if (res.data.code == 200) {
          Toast({
            message: "修改成功",
            position: "bottom",
          });
          this.tel = data;
        } else {
          Toast({
            message: "修改失败",
            position: "bottom",
          });
        }
      });
    },

    // 修改密码
    // 确认框关闭
    beforeClosePwd(action, done) {
      if (action === "confirm") {
        let exp = /^\w{6,16}$/;
        if (exp.test(this.pwd_value)) {
          this.changePwd(this.pwd_value);
          done();
          this.pwd_value = "";
        } else {
          Toast({
            message: "手机号格式不对",
            position: "bottom",
          });
          done();
        }
      } else {
        done();
        this.pwd_value = "";
      }
    },
    changePwd(data) {
      let params = `password=${data}&uid=${this.uid}`;
      this.axios.post("/users/user_uppwd", params).then((res) => {
        console.log(res);
        if (res.data.code == 200) {
          Toast({
            message: "修改成功",
            position: "bottom",
          });
          this.pwd = data;
        } else {
          Toast({
            message: "修改失败",
            position: "bottom",
          });
        }
      });
    },
    //返回
    onClickLeft() {
      this.$router.go(-1);
    },
    logout() {
      sessionStorage.removeItem("uid");
      this.$router.push("/personalcenter");
    },
  },
};
</script>
<style lang="scss" scoped>
.avatar {
  width: 50px;
  height: 50px;
  margin-right: 10px;
}
// dialog弹窗
::v-deep .van-dialog__content {
  text-align: center;
  input {
    text-align: center;
    padding: 10px 20px;
    border: 0;
    border-bottom: 0.5px solid #ccc;
  }
  p {
    color: #666;
  }
}

//导航栏主体背景色
::v-deep .van-nav-bar__content {
  background-color: #fff;
}
//导航栏箭头
::v-deep .van-icon-arrow-left:before {
  color: #000;
}
//导航栏标题
::v-deep .van-nav-bar__title {
  color: #000;
  font-size: 1.125rem;
}
//导航栏下边线
::v-deep .van-hairline--bottom::after {
  border-bottom-width: 0rem;
}
//按钮设置
::v-deep .van-button--primary {
  color: #fff;
  background-color: #f5b400;
  border: 0.0625rem solid #f5b400;
}
//单元格
.van-cell {
  line-height: 1.875rem;
  border: 0.0625rem solid whitesmoke;
  font-size: 1rem;
  padding: 1rem 1rem;
  border-radius: 0.9375rem;
  margin: 1.5vh 0;
}
//自定义修改按钮大小位置
::v-deep .van-button--large {
  width: 70%;
  margin: 0 auto;
}
.btnLogout {
  margin: 0 10vw;
  background-color: #f5b400;
  border-radius: 10px;
  width: 80vw;
  height: 48px;
  outline: none;
  color: #fff;
  font-size: 16px;
}
</style>
